---
import type { Product } from '../api';

interface Props {
	products: Product[];
}

const { products } = Astro.props;
---

<style>
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
	}

	figure {
		width: 200px;
		padding: 7px;
		border: 1px solid black;
		display: flex;
		flex-direction: column;
	}

	figure figcaption {
		text-align: center;
		line-height: 1.6;
	}

	figure img {
		width: 100%;
		height: 250px;
		object-fit: cover;
	}

	.product a {
		display: block;
		text-decoration: none;
		color: inherit;
	}

	.name {
		font-weight: 500;
	}

	.price {
		font-size: 90%;
		color: #787878;
	}
</style>
<slot name="title" />
<ul>
	{products.map((product) => (
		<li class="product">
			<a href={`/products/${product.id}`}>
				<figure>
					<img src={product.image} />
					<figcaption>
						<div class="name">{product.name}</div>
						<div class="price">${product.price}</div>
					</figcaption>
				</figure>
			</a>
		</li>
	))}
</ul>
